<template>
	<div class="home">
		<div class="stick">
			<div class="title">
				<div class="title_text" @click="handleChangeCurrent(0)">
					<span class="title_name" :class="currenIndex == 0 ? 'active' : ''">产品管理</span>
					<div :class="currenIndex == 0 ? 'underLine' : ''"></div>
				</div>

				<div class="title_text" style="width: 160rpx" @click="handleChangeCurrent(1)">
					<span class="title_name" :class="currenIndex == 1 ? 'active' : ''">供应产品库</span>
					<div :class="currenIndex == 1 ? 'underLine' : ''" style="width: 160rpx"></div>
				</div>

				<div class="title_img">
					<u-image v-if="currentList == 'grid'" src="../../static/newImg/grid.png" width="40rpx"
						height="40rpx" @click="currentList = 'list'"></u-image>
					<u-image @click="currentList = 'grid'" v-else src="../../static/newImg/list.png" width="40rpx"
						height="40rpx"></u-image>
				</div>
			</div>
			<div class="utabs" v-if="currenIndex == 0">
				<image class="iconclass1" src="/static/businessImg/lefticon.png" width="13rpx" heigth="24rpx"
					@click="change(current - 1)"></image>
				<image class="iconclass2" src="/static/businessImg/righticon.png" width="13rpx" heigth="24rpx"
					@click="change(current + 1)"></image>
				<u-tabs :list="list" :is-scroll="list.length > 4 ? true : false" :current="current" @change="change"
					font-size="28rpx" active-color="red" :show-bar="false" height="148rpx"
					:active-item-style="{'border-radius': '20rpx',color: '#FFFFFF', background: 'rgb(70, 207,56)'}">
				</u-tabs>
			</div>
			<div class="utabs" v-else>
				<image class="iconclass1" src="/static/businessImg/lefticon.png" width="13rpx" heigth="24rpx"
					@click="change(typecurrent - 1)"></image>
				<image class="iconclass2" src="/static/businessImg/righticon.png" width="13rpx" heigth="24rpx"
					@click="change(typecurrent + 1)"></image>
				<u-tabs :list="typeList" :is-scroll="typeList.length > 4 ? true : false" :current="typecurrent"
					@change="typechange" font-size="28rpx" active-color="red" :show-bar="false" height="148rpx"
					:active-item-style="{'border-radius': '20rpx',color: '#FFFFFF',background: 'rgb(70, 207,56)'}">
				</u-tabs>
			</div>
			<div class="myPro" v-if="currenIndex == 0">
				<div class="selectdiv">
					<div class="selectdivitem" :class="currentId == item.id ? 'activeItem' : ''"
						v-for="item in selectList" :key="item.id" @click="handleSelectClick(item.id)">
						{{ item.name }}
					</div>
				</div>
			</div>


			<div class="myPro" v-if="currenIndex == 1">
				<div class="selectdiv">
					<div class="selectdivitem" :class="currenttypeId == item.id ? 'activeItem' : ''"
						v-for="item in selectList" :key="item.id" @click="handleSelectClick(item.id)">
						{{ item.name }}
					</div>
				</div>
			</div>
		</div>


		<!-- 产品管理 grid -->
		<div class="prolist" v-show="currenIndex == 0 && currentList == 'grid'">
			<div class="proItem1" v-for="(item, index) in proList" :key="index" @click="handleProClick(item)">
				<div class="proImg">
					<u-image width="100%" height="292rpx" :src="item.image.split(',')[0]"></u-image>
				</div>
				<div class="proname1">{{ item.name }}</div>
				<div class="yueshoudiv1">
					<span>月售{{ item.sellNum }}</span>
					<span style="padding-left: 34rpx">库存{{ item.stockNum }}份</span>
				</div>

				<div class="pricediv">￥{{ item.price }}</div>

				<div class="prostatus" v-if="item.status == 0">上架中</div>
				<div class="prostatus prostatusxiajia" v-else-if="item.status == -1">已下架</div>
				<div class="prostatus prostatusshouqin" v-else>已售罄</div>
			</div>
		</div>

		<div class="prolist2" v-show="currenIndex == 0 && currentList == 'list'">
			<div class="proItem2out" v-for="(item, index) in proList" :key="index" @click="handleProClick(item)">
				<div class="mask" v-if="item.status != 0">

					<u-image src="../../static/newImg/xiajia.png" width="169rpx" height="169rpx"
						v-if="item.status == -1"></u-image>
					<u-image src="../../static/newImg/shouqin.png" width="169rpx" height="169rpx" v-else></u-image>
				</div>
				<div class="proItem2">
					<div class="proImg2">
						<u-image :src="item.image.split(',')[0]" width="171rpx" height="171rpx"></u-image>
					</div>
					<div class="flex2">
						<div class="proname2">{{ item.name }}</div>

						<div class="yueshoudiv2">
							<span>月售{{ item.sellNum }}</span>
							<span style="padding-left: 34rpx">库存{{ item.stockNum }}份</span>
						</div>
						<div class="yongjin2">
							售价: ￥<span style="font-size: 32rpx">{{ item.price }}</span>
						</div>

						<div class="prostatus3" v-if="item.status == 0">上架中</div>
						<div class="prostatus3 prostatusxiajia" v-else-if="item.status == -1">已下架</div>
						<div class="prostatus3 prostatusshouqin" v-else>已售罄</div>
					</div>

				</div>
			</div>
		</div>


		<!-- 供应产品库 grid -->
		<div class="prolist" v-if="currenIndex == 1 && currentList == 'grid'">
			<div class="proItem" v-for="(item, index) in proStoreList" :key="index" @click="handleProClick(item)">
				<div class="proImg">
					<u-image :src="item.image.split(',')[0]" width="100%" height="292rpx"></u-image>
				</div>
				<div class="yongjin" v-if="item.status == 0">
					可得佣金:￥{{ item.commission || 0 }}
				</div>
				<div class="yongjin1" v-else>可得佣金:￥{{ item.commission || 0 }}</div>
				<div class="proname">{{ item.name }}</div>
				<div class="yueshoudiv">
					<span>月售{{ item.sellNum }}</span>
					<span style="padding-left: 34rpx">库存{{ item.stockNum }}份</span>
				</div>
				<div class="pricediv">￥{{ item.price }}</div>
				<div class="prostatus" v-if="item.status == 0">上架中</div>
				<div class="prostatus prostatusxiajia" v-else-if="item.status == -1">已下架</div>
				<div class="prostatus prostatusshouqin" v-else>已售罄</div>
			</div>
		</div>

		<!-- 供应产品库 list -->

		<div class="prolist2" v-if="currenIndex == 1 && currentList == 'list'">
			<div class="proItem2out" v-for="(item, index) in proStoreList" :key="index" @click="handleProClick(item)">
				<div class="mask" v-if="item.status != 0">

					<u-image src="../../static/newImg/xiajia.png" width="169rpx" height="169rpx"
						v-if="item.status == -1"></u-image>
					<u-image src="../../static/newImg/shouqin.png" width="169rpx" height="169rpx" v-else></u-image>
				</div>
				<div class="proItem2">
					<div class="proImg2">
						<u-image :src="item.image.split(',')[0]" width="171rpx" height="171rpx"></u-image>
					</div>
					<div class="flex2">
						<div class="proname2">{{ item.name }}</div>

						<div class="yueshoudiv2">
							<span>月售{{ item.sellNum }}</span>
							<span style="padding-left: 34rpx">库存{{ item.stockNum }}份</span>
						</div>

						<div class="yongjin2">可得佣金:￥<span style="font-size: 32rpx;">{{item.commission || 0}}</span>
						</div>
						<div class="yongjin2">
							售价: ￥<span style="font-size: 32rpx">{{ item.price }}</span>
						</div>

						<div class="prostatus3" v-if="item.status == 0">上架中</div>
						<div class="prostatus3 prostatusxiajia" v-else-if="item.status == -1">已下架</div>
						<div class="prostatus3 prostatusshouqin" v-else>已售罄</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { proTypeList } from "@/api/storeAdmin.js";
import { supplierProList, supplierStoreProList } from "@/api/gongyingshang.js";
import storage from "@/utils/storage.js";
export default {
	data() {
		return {
			currenIndex: 0,
			pageSize: 10,
			myprostorepage: 1,
			mypropage: 1,
			proStoreList: [],
			proList: [],
			list: [],
			current: 0,
			currentList: "grid",
			typecurrent: 0,
			typeList: [],
			currentId: 0,
			currenttypeId: 0,
			selectList: [
				{
					id: 1,
					name: "上架中",
				},
				{
					id: 2,
					name: "已售罄",
				},
				{
					id: 3,
					name: "已下架",
				},
			],
		};
	},

	methods: {
		getMyproStoreList() {
			let typeId = null;
			if (this.typeList[this.typecurrent]) {
				typeId = this.typeList[this.typecurrent].id;
			}
			supplierStoreProList({
				typeId,
				page: this.myprostorepage,
				limit: this.pageSize,
				id: storage.getUserInfo().storeId,
				status: this.currenttypeId
			}).then((res) => {
				this.proStoreList = [...this.proStoreList, ...res.data.list];
			});
		},

		handleChangeCurrent(val) {
			this.currenIndex = val;
			if (this.currenIndex == 0) {
				this.proList = [];
				this.mypropage = 1;
				this.getList();
			} else {
				this.proStoreList = [];
				this.myprostorepage = 1;
				this.getMyproStoreList();
			}
		},

		handleSelectClick(val) {

			if (this.currenIndex == 0) {
				this.currentId = val;
				this.proList = [];
				this.mypropage = 1;
				this.getList();
			} else {
				this.currenttypeId = val;
				this.proStoreList = [];
				this.myprostorepage = 1;
				this.getMyproStoreList();
			}
		},

		change(val) {
			if (val == -1) {
				this.current = 0;
			} else if (val == this.list.length) {
				this.current = this.list.length - 1;
			} else {
				this.current = val;
			}
			this.mypropage = 1;
			this.prolist = [];
			this.getList();
		},

		typechange(val) {
			if (val == -1) {
				this.typecurrent = 0;
			} else if (val == this.typeList.length) {
				this.typecurrent = this.typeList.length - 1;
			} else {
				this.typecurrent = val;
			}

			this.myprostorepage = 1;
			this.proStoreList = [];

			this.getMyproStoreList();
		},
		handleProClick(item) {
			this.navigateTo(`/pages/gongyingshang/shangpinxiangqing?id=${item.id}`);
		},

		navigateTo(url) {
			uni.navigateTo({
				url: url,
			});
		},

		proTypeList() {
			proTypeList({
				id: storage.getUserInfo().storeId,
			}).then((res) => {
				this.list = res.data;
				// this.getMyproStoreList();
				this.getList()

			});
		},


		getList() {
			let typeId;
			if (this.list[this.current]) {
				typeId = this.list[this.current].id;
			} else {
				typeId = null;
			}

			supplierProList({
				storeId: storage.getUserInfo().storeId,
				type: this.currentId,
				page: this.mypropage,
				limit: this.pageSize,
				typeId,
			}).then((res) => {
				this.proList = [...this.proList, ...res.data.list];
			});
		},


		slectTypeList() {
			proTypeList({
				id: storage.getUserInfo().storeId,
			}).then((res) => {
				let that = this;
				let obj = [];
				if (res.data != null && res.data != "" && res.data != "[]") {
					res.data.forEach((item) => {
						obj.push({
							...item,
							text: item.name,
						});
					});
				}
				this.typeList = obj;
			});
		},
	},

	created() {
		uni.$on("onShowTrue", () => {
			this.myprostorepage = 1;
			this.mypropage = 1;
			this.proStoreList = [];
			this.proList = [];
			if (this.currenIndex == 0) {
				this.getList()
			} else {
				this.getMyproStoreList()
			}
			// this.proTypeList();
		});
	},

	mounted() {
		let that = this;
		uni.$on("onReachBottomtrue", () => {
			if (this.currenIndex == 0) {
				this.mypropage = this.mypropage + 1;
				this.getList();
			}
			if (this.currenIndex == 1) {
				this.myprostorepage = this.myprostorepage + 1;
				this.getMyproStoreList();
			}
		});
		this.proTypeList();
		this.slectTypeList();
	},
};
</script>

<style scoped>
.home {
	width: 100%;
	background: #ffffff;
}

.stick {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #ffffff;
}

.title {
	width: 100%;
	height: 42rpx;
	padding-top: 107rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: #ffffff;
}

.title_text {
	padding-left: 38rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 148rpx;
	height: 42rpx;
	align-content: center;
}

.title_name {
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 30rpx;
	color: #818181;
}

.underLine {
	width: 148rpx;
	height: 10rpx;
	background: rgb(70, 207, 56);
}

.active {
	font-family: Source Han Sans CN;
	font-weight: bold;
	font-size: 33rpx;
	color: #000000;
}

.myPro {
	padding: 0rpx 43rpx;
}

.utabs {
	width: 600rpx;
	height: 48rpx;
	margin: 40rpx auto 10rpx;
	position: relative;
}

.selectdiv {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 48rpx;
	padding-top: 12rpx;
	background: #ffffff;
}

.selectdivitem {
	width: 130rpx;
	height: 48rpx;
	text-align: center;
	line-height: 48rpx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 28rpx;
	color: #cecece;
	margin-right: 41rpx;
	border-radius: 30rpx;
}

.activeItem {
	color: #ffffff;
	background: rgb(70, 207, 56);
}

.prolist {
	padding: 22rpx 43rpx;
	padding-bottom: 100px;

	display: grid;
	grid-template-columns: repeat(auto-fill, 292rpx);
	grid-gap: 39rpx 59rpx;
	justify-content: center;
}

.proItem {
	width: 292rpx;
	height: 491rpx;
	position: relative;
	background: rgb(247, 247, 247);
}

.proImg {
	width: 100%;
	height: 292rpx;
}

.yongjin {
	width: 100%;
	height: 44rpx;
	line-height: 44rpx;
	font-size: 25rpx;
	color: #ffffff;
	text-align: center;
	background: #ff3a3a;
}

.yongjin1 {
	width: 100%;
	height: 44rpx;
	line-height: 44rpx;
	font-size: 25rpx;
	color: #ffffff;
	text-align: center;
	background: #ff3a3a;
	text-decoration: line-through;
}

.proname {
	width: 270rpx;
	height: 24rpx;
	font-family: PingFang;
	font-weight: bold;
	font-size: 25rpx;
	color: #0d182e;
	line-height: 24rpx;
	position: absolute;
	top: 351rpx;
	left: 14rpx;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yueshoudiv {
	width: 270rpx;
	height: 21rpx;
	line-height: 21rpx;
	position: absolute;
	left: 16rpx;
	top: 392rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 22rpx;
	color: #878c9a;
}

.pricediv {
	width: 140rpx;
	height: 25rpx;
	font-family: PingFang;
	font-weight: 500;
	font-size: 24rpx;
	color: #ff3a3a;
	line-height: 25rpx;
	position: absolute;
	bottom: 17rpx;
	left: 16rpx;
}

.prostatus {
	width: 106rpx;
	height: 33rpx;
	border-radius: 50rpx;
	text-align: center;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 23rpx;
	color: #ffffff;
	line-height: 33rpx;
	position: absolute;
	right: 14rpx;
	bottom: 13rpx;
	background: rgb(148, 207, 57);
}

.prostatus2 {
	width: 106rpx;
	height: 33rpx;
	border-radius: 50rpx;
	text-align: center;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 23rpx;
	color: #ffffff;
	line-height: 33rpx;
	position: absolute;
	right: 14rpx;
	bottom: 13rpx;
	background: rgb(255, 63, 59);
}

.iconclass1 {
	width: 13rpx;
	height: 24rpx;
	position: absolute;
	left: -33rpx;
	top: 50%;
	transform: translateY(-50%);
}

.iconclass2 {
	width: 13rpx;
	height: 24rpx;
	position: absolute;
	right: -33rpx;
	top: 50%;
	transform: translateY(-50%);
}

::v-deep .u-tab-item {
	height: 48rpx;
	line-height: 48rpx;
	font-size: 28rpx;
}

.adddiv {
	width: 100%;
	height: 130rpx;
	background: #ffffff;
	position: fixed;
	bottom: 50px;
}

.addimg {
	width: 97rpx;
	height: 97rpx;
	position: absolute;
	right: 42rpx;
}

.addtext {
	width: 93rpx;
	height: 23rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	position: absolute;
	top: 100rpx;
	right: 45rpx;
}

.addbtn {
	width: 48rpx;
	height: 48rpx;
	position: absolute;
	right: 14rpx;
	bottom: 13rpx;
}

.backbtn {
	width: 200rpx;
	height: 23rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 60rpx;
}

::v-deep .u-model__footer {
	padding: 36rpx 36rpx;
}

.scroll-Y {
	height: 1100rpx;
}

.addstoreview {
	width: 100%;
	height: 100rpx;
	padding: 36rpx;
	display: grid;
	grid-template-columns: repeat(auto-fill, 183rpx);
	grid-gap: 27rpx 27rpx;
	justify-content: center;
}

.addstoreviewItem {
	width: 183rpx;
	height: 183rpx;
	background: black;
	position: relative;
}

.deldiv {
	width: 31rpx;
	height: 31rpx;
	background: url("../../static/businessImg/del.png") no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: -15rpx;
	right: -15rpx;
}

.skupopup {
	width: 100%;
	padding: 30rpx;
}

.skupopupbtn {
	width: 100%;
	height: 58rpx;
	margin-top: 30rpx;

	display: flex;
	align-items: center;
	justify-content: space-around;

	.skupopupadd {
		text-align: center;
		width: 30%;
		height: 100%;
		line-height: 58rpx;
		border-radius: 29rpx;
		background: rgb(132, 194, 87);
		color: #ffffff;
	}
}

.title_img {
	position: absolute;
	right: 61rpx;
}


.prostatusxiajia {
	background: rgb(216, 216, 216) !important;
}

.prostatusshouqin {
	background: rgb(207, 57, 57) !important;
}

.prolist2 {
	width: 100%;
	box-sizing: border-box;
	padding: 22rpx 0;

	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.proItem2 {
	width: 100%;
	box-sizing: border-box;
	height: 181rpx;
	background: rgb(251, 251, 251);
	padding: 5rpx 59rpx;
	display: flex;
	align-items: center;
	margin-bottom: 17rpx;
	position: relative;
}

.proItem2out {
	width: 100%;
	position: relative;
}

.mask {
	width: 100%;
	height: 181rpx;
	background: rgba(23, 23, 24, 0.6);

	position: absolute;
	z-index: 1;

	display: flex;
	align-items: center;
	justify-content: center;
}

.proImg2 {
	width: 171rpx;
	height: 171rpx;
}

.flex2 {
	flex: 1;
	height: 100%;
	position: relative;
}

.proname2 {
	width: 330rpx;
	height: 58rpx;
	font-family: PingFang;
	font-weight: bold;
	font-size: 25rpx;
	color: #0d182e;
	line-height: 29rpx;
	position: absolute;
	top: 14rpx;
	left: 14rpx;

	/* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}


.yueshoudiv2 {
	width: 270rpx;
	height: 21rpx;
	line-height: 21rpx;
	position: absolute;
	left: 16rpx;
	top: 392rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 22rpx;
	color: #878c9a;
	position: absolute;
	left: 14rpx;
	top: 86rpx;
}

.pricediv2 {
	width: 200rpx;
	height: 27rpx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 24rpx;
	color: #ff3a3a;
	position: absolute;
	bottom: 20rpx;
	left: 320rpx;
}

.yongjin2 {
	width: 200rpx;
	height: 27rpx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 24rpx;
	color: #ff3a3a;
	position: absolute;
	bottom: 20rpx;
	left: 14rpx;
}

.prostatus3 {
	width: 109rpx;
	height: 36rpx;
	background: rgb(148, 207, 57);
	border-radius: 5rpx;
	text-align: center;
	line-height: 36rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 23rpx;
	color: #ffffff;
	position: absolute;
	top: 14rpx;
	right: 0;
}

.proItem1 {
	width: 292rpx;
	height: 451rpx;
	position: relative;
	background: rgb(247, 247, 247);
}

.proname1 {
	width: 270rpx;
	height: 24rpx;
	font-family: PingFang;
	font-weight: bold;
	font-size: 25rpx;
	color: #0d182e;
	line-height: 24rpx;
	position: absolute;
	top: 316rpx;
	left: 14rpx;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yueshoudiv1 {
	width: 270rpx;
	height: 21rpx;
	line-height: 21rpx;
	position: absolute;
	left: 16rpx;
	top: 357rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 22rpx;
	color: #878c9a;
}
</style>
